<template>
	<view class="login-container bg">
		<u-form class="login-form box-s" :model="form" :rules="rules" ref="loginForm">
			<h2 class="dis-jc">致丰负载箱测试系统</h2>
			<u-form-item class="login-form-item" prop="username">
				<uni-easyinput v-model="form.username" placeholder="请输入账号" />
			</u-form-item>
			<u-form-item prop="password">
				<uni-easyinput v-model="form.password" type="password" placeholder="请输入密码" />
			</u-form-item>
			<button class="btn" type="primary" @click="handleLogin">登录</button>
		</u-form>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'

	const form = ref({
		username: '',
		password: ''
	})

	const rules = {
		username: { required: true, message: '请输入账号' },
		password: { required: true, message: '请输入密码' }
	}

	const handleLogin = async () => {
		uni.reLaunch({ url: '/pages/index/index' })
	}
</script>
<style lang="scss" scoped>
	.login-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;

		.login-form {
			color:#fff;
			border-radius: 4px;
			padding: 32px;
			border: 1px solid $uni-color-theme;
			width: 20%;

			h2 {
				margin-bottom: 24px;
			}

			:deep(.uni-easyinput) {
				padding-bottom: 14px;
			}

			:deep(.uni-easyinput__content.is-input-border) {
				height: 44px;
			}
			
			.btn{
				background: linear-gradient(to right, #0169E1, #2e77e3, #94335f)
			}
			
		}
	}
</style>